let startBtn = document.querySelector('.startBtn')
let prizeCell = document.querySelectorAll('.drawBox div:not(.startBtn)')
let bb = document.querySelectorAll('.bb div')
console.log(prizeCell);
let index = aa = 0
let targetIndex = cc = 84
let second = 200
let a
let isRun = true
console.log(bb);
//开始抽奖
startBtn.addEventListener('click', function() {

    if (isRun) {
        isRun = false
        run()
        is()
    }
})

function run() {
    a = setTimeout(function() {
        // prizeCell.forEach(function(item) {
        //     item.classList.remove('active')
        // })
        if (index) {
            prizeCell[(index - 1) % 8].classList.remove('active')
        }
        prizeCell[index % 8].classList.add('active')
        if (index < targetIndex) {
            run()
        }
        index++
        if (second > 20 && index < 20) {
            second = second - 20
        } else
        if (index > 60) {
            second = second + 10
        } else {
            isRun = true

        }
    }, second)
}

function is() {
    a = setTimeout(function() {
        // prizeCell.forEach(function(item) {
        //     item.classList.remove('active')
        // })
        if (aa) {
            bb[(aa - 1) % 8].classList.remove('active')
        }
        if (aa) {
            bb.forEach(function(item) {
                item.style.transform = `translateY(-${aa % 8}00%)`
            })
        }
        bb[aa % 8].classList.add('active')
        if (aa < cc) {
            is()
        }
        aa++
        if (second > 20 && aa < 20) {
            second = second - 20
        } else
        if (aa > 60) {
            second = second + 10
        } else {
            isRun = true
        }
    }, second)
}